<template>
  <div class="membership-center">
    <!-- 页面标题 -->
    <header class="membership-header">
      <h1>🎯 会员中心</h1>
      <p>探索会员特权，解锁更多精彩内容</p>
    </header>

    <!-- 用户信息卡片 -->
    <section class="user-info-card" v-if="currentUser">
      <div class="user-avatar">
        <span class="avatar-text">{{ currentUser.username.charAt(0).toUpperCase() }}</span>
      </div>
      <div class="user-details">
        <h2>{{ currentUser.username }}</h2>
        <p>{{ currentUser.email }}</p>
        <div v-if="currentUser.isMember" class="membership-badge" :style="{ backgroundColor: membershipInfo?.color || '#cd7f32' }">
          {{ membershipInfo?.name || '普通会员' }}
        </div>
        <div v-else class="non-member-badge">
          非会员
        </div>
      </div>
    </section>

    <!-- 会员特权展示 -->
    <section class="privileges-section">
      <h2 class="section-title">✨ 会员特权</h2>
      <div v-if="currentUser && currentUser.isMember" class="privileges-list">
        <div v-for="(privilege, index) in memberPrivileges" :key="index" class="privilege-item">
          <span class="privilege-icon">✓</span>
          <span>{{ privilege }}</span>
        </div>
      </div>
      <div v-else class="non-member-message">
        <p>您当前还不是会员，升级会员即可享受以下全部特权：</p>
        <div class="all-privileges-preview">
          <div class="privilege-item preview">
            <span class="privilege-icon">🔓</span>
            <span>全部动物内容无限制访问</span>
          </div>
          <div class="privilege-item preview">
            <span class="privilege-icon">🔓</span>
            <span>专属会员头像框</span>
          </div>
          <div class="privilege-item preview">
            <span class="privilege-icon">🔓</span>
            <span>减少广告干扰</span>
          </div>
          <div class="privilege-item preview">
            <span class="privilege-icon">🔓</span>
            <span>独家活动邀请</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 会员等级选项 -->
    <section class="membership-levels-section">
      <h2 class="section-title">🎯 选择会员等级</h2>
      <div class="membership-cards">
        <!-- 青铜会员 -->
        <div class="membership-card bronze" :class="{ active: currentUser?.membershipLevel === 'bronze' }">
          <div class="card-header" style="background-color: #cd7f32;">
            <h3>青铜会员</h3>
            <p class="price">免费</p>
          </div>
          <div class="card-body">
            <ul class="level-privileges">
              <li>基础内容访问</li>
              <li>每日签到</li>
              <li>社区互动</li>
            </ul>
            <button 
              class="upgrade-button bronze" 
              @click="handleUpgrade('bronze')"
              :disabled="currentUser?.membershipLevel === 'bronze'"
            >
              {{ currentUser?.membershipLevel === 'bronze' ? '当前等级' : '立即升级' }}
            </button>
          </div>
        </div>

        <!-- 白银会员 -->
        <div class="membership-card silver" :class="{ active: currentUser?.membershipLevel === 'silver' }">
          <div class="card-header" style="background-color: #c0c0c0;">
            <h3>白银会员</h3>
            <p class="price">¥19.9/月</p>
          </div>
          <div class="card-body">
            <ul class="level-privileges">
              <li>包含青铜会员所有特权</li>
              <li>高级内容访问</li>
              <li>专属头像框</li>
              <li>减少广告</li>
            </ul>
            <button 
              class="upgrade-button silver" 
              @click="handleUpgrade('silver')"
              :disabled="currentUser?.membershipLevel === 'silver'"
            >
              {{ currentUser?.membershipLevel === 'silver' ? '当前等级' : '立即升级' }}
            </button>
          </div>
        </div>

        <!-- 黄金会员 -->
        <div class="membership-card gold" :class="{ active: currentUser?.membershipLevel === 'gold' }">
          <div class="card-header" style="background-color: #ffd700;">
            <h3>黄金会员</h3>
            <p class="price">¥39.9/月</p>
          </div>
          <div class="card-body">
            <ul class="level-privileges">
              <li>包含白银会员所有特权</li>
              <li>全部内容访问</li>
              <li>专属客服</li>
              <li>独家活动邀请</li>
              <li>高速加载</li>
            </ul>
            <button 
              class="upgrade-button gold" 
              @click="handleUpgrade('gold')"
              :disabled="currentUser?.membershipLevel === 'gold'"
            >
              {{ currentUser?.membershipLevel === 'gold' ? '当前等级' : '立即升级' }}
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- 会员专属内容预览 -->
    <section class="exclusive-content-section">
      <h2 class="section-title">🔒 会员专属内容预览</h2>
      <div class="exclusive-content-preview">
        <div class="exclusive-item">
          <img src="https://img95.699pic.com/photo/50644/6272.jpg_wh860.jpg" alt="会员专属图片">
          <div class="exclusive-overlay">
            <p>会员专享高清图片库</p>
          </div>
        </div>
        <div class="exclusive-item">
          <img src="https://img95.699pic.com/photo/60045/5295.jpg_wh860.jpg" alt="会员专属图片">
          <div class="exclusive-overlay">
            <p>会员专享动物百科</p>
          </div>
        </div>
        <div class="exclusive-item">
          <img src="https://img95.699pic.com/photo/60041/9389.jpg_wh860.jpg" alt="会员专属图片">
          <div class="exclusive-overlay">
            <p>会员专享互动游戏</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 温馨提示 -->
    <section class="tips-section">
      <div class="tips-card">
        <h3>💡 温馨提示</h3>
        <p>升级会员后，您将立即获得所有会员特权，可以更好地探索动物世界的奇妙之处！</p>
        <p>如有任何问题，请联系我们的客服团队。</p>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  getCurrentUser,
  isLoggedIn,
  getMembershipInfo,
  getMemberPrivileges,
  upgradeToMember,
  logout
} from '../services/membershipService.js'

const router = useRouter()
const currentUser = ref(null)
const membershipInfo = ref(null)
const memberPrivileges = ref([])
const upgradeSuccess = ref(false)

// 初始化页面数据
const initializeData = () => {
  if (isLoggedIn()) {
    currentUser.value = getCurrentUser()
    membershipInfo.value = getMembershipInfo()
    memberPrivileges.value = getMemberPrivileges()
  } else {
    // 如果未登录，重定向到登录页面
    router.push('/login')
  }
}

// 升级会员等级
const handleUpgrade = (level) => {
  const result = upgradeToMember(level)
  if (result.success) {
    upgradeSuccess.value = true
    // 更新当前用户信息
    currentUser.value = result.user
    membershipInfo.value = getMembershipInfo()
    memberPrivileges.value = getMemberPrivileges()
    
    // 3秒后清除成功提示
    setTimeout(() => {
      upgradeSuccess.value = false
    }, 3000)
  }
}

// 退出登录
const handleLogout = () => {
  logout()
  router.push('/login')
}

// 页面加载时初始化数据
onMounted(() => {
  initializeData()
})
</script>

<style scoped>
.membership-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* 页面标题 */
.membership-header {
  text-align: center;
  margin-bottom: 2rem;
}

.membership-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.membership-header p {
  font-size: 1.1rem;
  color: #666;
}

/* 用户信息卡片 */
.user-info-card {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #4CAF50;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
}

.avatar-text {
  color: white;
  font-size: 2rem;
  font-weight: bold;
}

.user-details h2 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.user-details p {
  margin: 0 0 0.5rem 0;
  color: #666;
}

.membership-badge, .non-member-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  color: white;
}

.non-member-badge {
  background-color: #999;
}

/* 通用部分样式 */
.section-title {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* 会员特权展示 */
.privileges-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.privileges-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.privilege-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background-color: #f0f0f0;
  border-radius: 8px;
}

.privilege-item.preview {
  opacity: 0.7;
}

.privilege-icon {
  margin-right: 0.75rem;
  font-size: 1.2rem;
  color: #4CAF50;
}

.non-member-message {
  text-align: center;
}

.non-member-message p {
  margin-bottom: 1.5rem;
  color: #666;
}

.all-privileges-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

/* 会员等级选项 */
.membership-levels-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.membership-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.membership-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.membership-card:hover {
  transform: translateY(-5px);
}

.membership-card.active {
  border: 3px solid #4CAF50;
}

.card-header {
  padding: 1.5rem;
  color: white;
  text-align: center;
}

.card-header h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.price {
  font-size: 1.2rem;
  font-weight: bold;
}

.card-body {
  padding: 1.5rem;
}

.level-privileges {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.level-privileges li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.level-privileges li:last-child {
  border-bottom: none;
}

.upgrade-button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.upgrade-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.upgrade-button.bronze {
  background-color: #cd7f32;
  color: white;
}

.upgrade-button.bronze:hover:not(:disabled) {
  background-color: #a05f22;
}

.upgrade-button.silver {
  background-color: #c0c0c0;
  color: white;
}

.upgrade-button.silver:hover:not(:disabled) {
  background-color: #a0a0a0;
}

.upgrade-button.gold {
  background-color: #ffd700;
  color: #333;
}

.upgrade-button.gold:hover:not(:disabled) {
  background-color: #e6c200;
}

/* 会员专属内容预览 */
.exclusive-content-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.exclusive-content-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.exclusive-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 200px;
}

.exclusive-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.exclusive-item:hover img {
  transform: scale(1.05);
}

.exclusive-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  padding: 1rem;
  text-align: center;
}

/* 温馨提示 */
.tips-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tips-card {
  text-align: center;
}

.tips-card h3 {
  color: #4CAF50;
  margin-bottom: 1rem;
}

.tips-card p {
  color: #666;
  margin-bottom: 0.5rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .membership-center {
    padding: 1rem;
  }
  
  .user-info-card {
    flex-direction: column;
    text-align: center;
  }
  
  .user-avatar {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .membership-cards {
    grid-template-columns: 1fr;
  }
  
  .exclusive-content-preview {
    grid-template-columns: 1fr;
  }
}
</style>